<template>
   
 <el-card>
  <el-tabs v-model="searchForm.status" @tab-change="getData">
      <el-tab-pane
        :label="item.name"
        :name="item.status"
        v-for="(item, index) in tabbars"
        :key="index"
      >
    </el-tab-pane>

    </el-tabs>
     <!-- 搜索 -->
     <!-- <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
        <SearchItem label="訂單編號">
          <el-input v-model="searchForm.order_no" placeholder="訂單編號" clearable></el-input>
        </SearchItem>
        <template #show>
          
          <SearchItem label="訂單類型">
            <el-select v-model="searchForm.order_type" placeholder="请选择訂單類型" clearable>
              <el-option  label="預約" value="1"/>
              <el-option  label="即時" value="2"/>
            </el-select>
          </SearchItem>
        
        </template>
        
    </Search> -->
    
    <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
        <SearchItem label="訂單編號">
          <el-input v-model="searchForm.order_no" placeholder="訂單編號" clearable></el-input>
        </SearchItem>
        <template #show>

          <SearchItem label="选择時間">
            <el-date-picker
                v-model="searchForm.time"
                type="daterange"
                range-separator="至"
                start-placeholder="開始時間"
                end-placeholder="結束時間"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
          </SearchItem>
          <SearchItem label="訂單類型">
            <el-select v-model="searchForm.order_type" placeholder="请选择訂單類型" clearable>
              <el-option  label="預約" value="1"/>
              <el-option  label="即時" value="2"/>
            </el-select>
          </SearchItem>
         
         
         
        </template>
      </Search>

    <!-- 新增|刷新 -->
    <ListHeader    layout="refresh" @refresh="getData" />

    <el-table :data="tableData"  v-loading="loading">
      <el-table-column label="序號">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      
      <el-table-column prop="order_no" label="訂單編號" width="200" />
     
      <el-table-column  label="訂單類型" >
        
        <template #default="{ row }">
          {{ row.order_type==1?'預約':'即時' }}
       
        </template>
      </el-table-column>
      <el-table-column prop="pay_price" label="訂單金額"></el-table-column>
      <el-table-column  label="送貨方式" >
        
        <template #default="{ row }">
          {{ row.delivery_type==1?'自取':'商家配送' }}
       
        </template>
      </el-table-column>
      <el-table-column  label="支付方式" >
        
        <template #default="{ row }">
          <el-tag
            :type="
              row.pay_mode == 1 ? '' : row.pay_mode == 2 ? 'info' : 'warning'
            "
            >{{
              row.pay_mode == 1 ? "PayPal" : row.pay_mode == 2 ? "錢包" : "線下"
            }}
            </el-tag>
       
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="支付狀態">
        <template #default="{ row }">
          <el-tag :type="row.status == 10 ? 'danger' : row.status == 20 ?'success' : 'primary'">{{
            row.status == 10 ? "待支付" : row.status == 20 ? '已支付' :'已完成'
          }}</el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="created_at" label="下單時間"  />

 
      <el-table-column label="操作" width="280" align="center">
        <template #default="scope">
        
            <el-button type="primary" size="small"  @click="handleInfo(scope.row)">詳情</el-button>
            <el-button v-if="scope.row.status>10 &&scope.row.status!=50" type="success" size="small"  @click="handleOrder(scope.row)">完成訂單</el-button>
            <el-button v-if="scope.row.status!=50" type="success" size="small"  @click="handlePdf(scope.row)">發票</el-button>
            <el-button v-if="scope.row.status==50" type="success" size="small"  @click="handlePdf(scope.row)">收據</el-button>
          <el-popconfirm title="是否要删除訂單？" confirmButtonText="確認" cancelButtonText="取消" @confirm="handleDelete(scope.row.id)">
                <template #reference>
                    <el-button type="danger" size="small">刪除</el-button>
                </template>
            </el-popconfirm>
        
        </template>
      </el-table-column>
      
    </el-table>
    <span >今日銷售額：{{ today }}</span>
    <span class="ml-30">當月售額：{{ month }}</span>
    <span class="ml-30">總銷售額：{{ totalprices }}</span>
    <div class="flex items-center justify-center mt-5">
        <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"/>
    </div>

    <InfoModal ref="InfoModalRef" :info="info"></InfoModal>
 </el-card>
</template>

 <script setup>
import { ref } from "vue"
import ListHeader from "@/components/ListHeader.vue";
import Search from "@/components/Search.vue";
import SearchItem from "@/components/SearchItem.vue";
import { useInitTable } from '@/composables/useCommon.js'
import InfoModal from "./InfoModal.vue";
import { msg } from "@/composables/util"
import {
  getorder,
  del,
  pdf,
  over
} from "@/api/order.js"

const today=ref(0)
const totalprices=ref(0)
const month=ref(0)
const {
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  currentPage,
  total,
  limit,
  getData,
  handleDelete
} = useInitTable({
  searchForm: {
    status: '1',
    order_no:'',
    order_type:'',
    time:''
  },
  getList:getorder,
  onGetListSuccess:(res)=>{
    tableData.value = res.data.data
    total.value = res.data.total
    today.value=res.money.today
    month.value=res.money.month
    totalprices.value=res.money.totalprices
  },
  delete:del, 
})

const tabbars = [
  {
    status: '1',
    name: "全部",
  },
  {
    status: '10',
    name: "待支付",
  },
  {
    status: '20',
    name: "已支付",
  },
  {
    status: '50',
    name: "已完成",
  },
];


const InfoModalRef = ref(null);
const info = ref(null);
const handleInfo=(row)=>{
  info.value = row;
  InfoModalRef.value.open();
}


const handlePdf=(row)=>{
    pdf(row.id).then(res=>{
      window.open(res)
    })
}

const handleOrder=(row)=>{
  over(row.id).then(res=>{
    getData()
    msg('訂單已完成')
  })
}
</script>

